<template>
  <div>
      <div class="searchDiv">
          <div class="title">{{$t('analyzeData.jiaoyixingwei')}} {{timeLimit}}</div>
            <el-table
                v-show="weixin"
                ref="tableRefM"
                :data="tableData"
                border
                height="60vh"
                style="width: 100%;">
                <el-table-column prop="contactavatar" :label="$t('analyzeData.lianxirenxingwei')" width="100">
                  <template slot-scope="scope">
                    <img width="80" height="80" :src="scope.row.contactavatar" alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="contactname" :label="$t('analyzeData.lianxireninfo')" width="180">
                  <template slot-scope="scope">
                      <div>{{scope.row.contactnick}}</div>
                      <div>{{scope.row.contactname}}</div>
                  </template>
                </el-table-column>
            <el-table-column prop="contant" :label="消息内容" :show-overflow-tooltip="true"  width="800">
            <template slot-scope="scope">
              <div v-if="scope.row.issend==1">
              <div v-if="formateCard(scope.row).msg.appmsg.type==5" class="hongbaotext">
              <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
              <span style="font-weight:1000;margin-left:15px;">
                  <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
                <span v-else>{{scope.row.sendername}}</span>
              </span>
            {{scope.row.contactnick}}
              <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.des}}</span>元</div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==8">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (3).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
              </span>
            转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>
            元给 <span style="font-weight:1000;">{{scope.row.contactnick}}</span> <span v-if="scope.row.contactname">({{scope.row.contactname}})</span></div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
            <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
            </span>
            已退还来自 <span style="font-weight:1000;">{{scope.row.contactnick}}</span> <span v-if="scope.row.contactname">({{scope.row.contactname}})</span>的转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (1).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
            <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
            </span>
            收到来自 <span style="font-weight:1000;">{{scope.row.contactnick}}</span> <span v-if="scope.row.contactname">({{scope.row.contactname}})</span>转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元 </div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
            <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
            </span>
            已被退还
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==1" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (3).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">{{scope.row.sendername}}</span>
            转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元给  <span style="font-weight:1000;">{{scope.row.contactnick}}</span> <span  v-if="scope.row.contactname">({{scope.row.contactname}})</span></div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==10" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
            </span>
            已被{{scope.row.contactnick}} <span v-if="scope.row.contactname">({{scope.row.contactname}})</span>退还转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          </div>
          <!-- issend == 0 -->
          <div v-else>
          <div v-if="formateCard(scope.row).msg.appmsg.type==5" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
                <span v-if="scope.row.sendernick">{{scope.row.sendernick}}</span>
              <span v-else>{{scope.row.sendername}}</span>
            </span>
          {{scope.row.contactnick}}
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.des}}</span></div>
            <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==8">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (3).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.contactnick">{{scope.row.contactnick}}</span>
              <span v-else>{{scope.row.contactname}}</span>
              </span>
            转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>
            元给 <span style="font-weight:1000;">{{label}}</span></div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.contactnick">{{scope.row.contactnick}}</span>
              <span v-else>{{scope.row.contactname}}</span>
            </span>
            已退还来自 <span style="font-weight:1000;">{{label}}</span>的转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (1).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.contactnick">{{scope.row.contactnick}}</span>
              <span v-else>{{scope.row.contactname}}</span>
            </span>
            收到来自 <span style="font-weight:1000;">{{label}}</span>转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元 </div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
              <span v-if="scope.row.contactnick">{{scope.row.contactnick}}</span>
              <span v-else>{{scope.row.contactname}}</span>
            </span>
            已被退还
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==1" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (3).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">{{scope.row.sendername}}</span>
            转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元给  <span style="font-weight:1000;">{{label}}</span></div>

          <div v-else-if="formateCard(scope.row).msg.appmsg.wcpayinfo.paysubtype==10" class="hongbaotext">
            <img src="../../../assets/images/weChatQQ/zhuanzhanglist (2).png" width="30px" height="30px" alt="">
            <span style="font-weight:1000;margin-left:15px;">
            <span v-if="scope.row.contactnick">{{scope.row.contactnick}}</span>
              <span v-else>{{scope.row.contactname}}</span>
            </span>
            已被<span style="font-weight:1000;">{{label}}</span>退还转账
            <span style="font-weight:1000;color:red;">{{formateCard(scope.row).msg.appmsg.wcpayinfo.feedesc}}</span>元</div>
          </div>

        </template>
                </el-table-column>
                <el-table-column prop="msgtime" label="消息时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.msgtime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
            <!-- sms -->
            <el-table
                v-if="sms"
                :data="tableData"
                border
                height="60vh"
                style="width: 100%">
                <el-table-column prop="phone" label="手机号">
                </el-table-column>

                <el-table-column prop="content" label="消息内容" :show-overflow-tooltip="true"  width="700"></el-table-column>
                <el-table-column prop="smstime" label="消息时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.smstime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
            <!-- 通话记录 -->
             <el-table
                v-if="callR"
                :data="tableData"
                border
                height="60vh"
                style="width: 100%">
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
                <el-table-column prop="duration" label="通话时长（秒）" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="smstime" label="时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.calltime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
      </div>
      <!-- 事件行为dialog -->
    <a-modal
      v-model="dialogVisible"
      title="Vertically centered modal dialog"
      centered
      @ok="handleOk"
    >
      <p>some contents1</p>
      <p>some contents2</p>
      <p>some contents3</p>
    </a-modal>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import loadingTem from '../../mainComponents/loading/index.vue'
const x2js=require('x2js');
const x2jsone=new x2js(); //实例
export default {
    name:'allSearch',
    props:['timeLimit','tableDataInfo'],
    components:{
        loadingTem
    },
    data(){
        return{
        dialogVisible:false,
        total:0,
        page:1,
        limit:20,
        tableData: [

        ],
        list:[],
        tableTitleDictionary:[
          {value:'dictionary',name:'头像'},
          {value:'contactname',name:'接收者账号'},
          {value:'contactnick',name:'接受者名称'},
          {value:'contant',name:'内容'},
          {value:'issend',name:'消息类型'},
          {value:'msgtime',name:'时间'},
          {value:'recovery',name:'是否删除'},
          {value:'sendername',name:'发送者名称'},
          {value:'sendernick',name:'发送者账号'},
        ],
        weixin:false,
        sms:false,
        callR:false
        }
    },
    created(){
    },
    methods:{
    // 格式化xml
    formateCard(item){
      try {
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
      } catch (error) {
      } 
    },
      initLoading(){

      },
      formateDate(date){
        return parseTime(date)
      },
      formateTableTitle(item){
        this.tableTitleDictionary.forEach(element=>{
          if(item == element.value){
            return element.name
          }
        })
      },
      // 获取表头数组
      initTableData(){
        let classData=sessionStorage.getItem('tableClass')
        if(classData=='微信'){
        this.$refs.tableRefM.bodyWrapper.scrollTop=0
          this.weixin=true
          this.sms=false
          this.callR=false
        }else if(classData=='短信'){
          this.sms=true
          this.weixin=false
          this.callR=false
        }else{
          this.callR=true
          this.sms=false
          this.weixin=false
        }
        if(this.tableDataInfo){
            this.tableData=this.tableDataInfo
        }else{
            this.tableData=[]
        }
      },
      handleClick(row){
          this.dialogVisible=true
      },
      handleOk(){

      },
      handleSizeChange(val) {
        this.limit=val
      },
      handleCurrentChange(val) {
        this.page=val
      }
    }
}
</script>
<style>
.el-tooltip__popper {
  max-width: 800px;
}
.cell el-tooltip{
  width: auto !important;
}
</style>
<style scoped>
.block{
    margin-top: 10px;
}
.searchDiv{
    width: 99%;
    min-height:485px;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding: 20px;
}
.title{
    height: 50px;
    font-size: 20px;
    font-weight: bold;
}
</style>